<template>
<el-dialog title="上传资源" :visible.sync="value" :before-close="hideForm" :close-on-click-modal="false" width="650px" top="5vh">
  <el-form ref="upLoadForm"  :model="upLoadData" :rules="upLoadRules">
    <el-form-item label="资源类型"  prop="resType" label-width="110px" class="query-form-item">
      <el-select v-model="upLoadData.resType" @change="selectUploadType" style=" width:250px;">
        <el-option label="图片" value="0" />
        <el-option label="视频" value="1" />
        <el-option label="音频" value="2" />
        <el-option label="文字链接" value="3" />
        <el-option label="富文本编辑器" value="9" />
      </el-select>
    </el-form-item>
    <el-form-item label="资源名称"  prop="resName" label-width="110px" class="query-form-item">
      <el-input v-model="upLoadData.resName" placeholder="请输入资源名称" style=" width:250px;"></el-input>
    </el-form-item>
    <template v-if = "upLoadData.resType < 3">
      <el-form-item label="资源文件"  label-width="110px" class="query-form-item">
        <SingleUpload
        :ext="typeName[upLoadData.resType]"
        :type="uploadType[upLoadData.resType]"
        :size="sizeName[upLoadData.resType]"
        :imageUrl="imageUrl"
        @on-select="onSelect"></SingleUpload>
        <div class="el-upload__tip">只能上传<span>{{typeName[upLoadData.resType]}}</span>文件，且不超过<span>{{sizeName[upLoadData.resType]}}M</span></div>
      </el-form-item>
      <el-form-item label="跳转地址"  label-width="110px" prop="actionUrl" class="query-form-item">
        <el-input  placeholder="请输入跳转地址" style="width:90%;" v-model="upLoadData.actionUrl"></el-input>
      </el-form-item>
      <el-form-item label="资源文本"  label-width="110px" prop="resContent" class="query-form-item">
        <el-input type="textarea" :rows="4" placeholder="请输入文本内容，可适当加HTML标签" style="width:90%;" v-model="upLoadData.resContent"></el-input>
      </el-form-item>
    </template>
    <template v-if = "upLoadData.resType == 3">
      <el-form-item label="文字链接"  label-width="110px" prop="resContent" class="query-form-item">
       	 <el-input v-model="addResText.text" class="add-inpt add-inpt-01" placeholder="请输入文字内容"></el-input>
         <el-input v-model="addResText.link" class="add-inpt add-inpt-02" style=" width:250px;" placeholder="请输入文字链接"></el-input>
         <el-button type="primary" icon="el-icon-edit" @click="addResTextLink">添加</el-button>
      	 <el-table class="add-table" :data="upLoadData.resText" :border="upLoadData.resText.length > 0" max-height="300" :show-header="false" style=" width:479px;">
            <el-table-column align="left" width="140"  prop="text" show-overflow-tooltip></el-table-column>
         		<el-table-column align="left" prop="link" show-overflow-tooltip></el-table-column>
         		<el-table-column align="center" width="88">
            	<template slot-scope="scope">
            		<el-button size="mini" @click="delResText(scope.$index)" type="danger" plain icon="el-icon-delete"></el-button>
            	</template>
            </el-table-column>
         </el-table>
      </el-form-item>
    </template>
    <template v-if = "upLoadData.resType == 9">
      <el-form-item label="资源文本"  label-width="110px" prop="resContent" class="query-form-item">
        <div style="height:270px;">
        	<Tinymce ref="editor" menubar="false" :toolbar="['undo redo bold italic underline  outdent   anchor insertdatetime table preview code']"  v-model="upLoadData.resContent" :width="460" :height="200" class="editor" />
      	</div>
      </el-form-item>
    </template>
    <div class="dialog-footer" style="text-align:right; padding:10px 20px 0 0">
      <el-button @click.native="hideForm">取消</el-button>
      <el-button type="primary" :loading="formLoading" @click.native="upLoadFormSubmit()">提交</el-button>
    </div>
  </el-form>
</el-dialog>
</template>

<script>
import config from '@/api/bgapi';
import request from '@/utils/request';
import SingleUpload from "@/components/Upload/SingleUpload";
import Tinymce from '@/components/Tinymce';
export default {
	components: { SingleUpload,Tinymce},
	props: ['value'],
  data() {
    return {
			upLoadData:{ resType:'0', resName:'', resUrl:'', resContent:'',actionUrl:'',resText:[], resSize:''},
			upLoadRules:{
        resName: [{ required: true, message: "请输入资源名称", trigger: "blur"}],
        //resUrl: [{ required: true, message: "请输入资源文件", trigger: "blur"}]
      },
      uploadType:['image','video','audio'],
      typeName:['jpg/png/gif/jpeg','mp4','mp3/wma'],
      sizeName:[5,20,20],
			formLoading:false,
			addResText:{text:'',link:''},
			imageUrl:'', //上传组件里的图
		}
  },
  mounted() {},
  methods: {
		selectUploadType(){
      this.upLoadData.resUrl = '';
			this.upLoadData.resContent = '';
			this.upLoadData.resSize = '';
			this.upLoadData.resText = [];
			this.imageUrl = '';
		},
		onSelect(data){
			this.upLoadData.resUrl = data.resUrl;
			this.upLoadData.resSize = data.resSize;
			this.imageUrl = data.imgUrl;
    },
		upLoadFormSubmit(){
			this.$refs["upLoadForm"].validate(async valid => {
				if(valid){
					if(this.upLoadData.resType < 3 && this.upLoadData.resUrl == ''){this.$message.error("请上传资源文件"); return}
					if(this.upLoadData.resType == 3){
						if(this.upLoadData.resText.length == 0){
							this.$message.error("请输入文字内容"); return
						}else{
							this.upLoadData.resSize = this.upLoadData.resText.length;
						}
					};
					if(this.upLoadData.resType == 9){
						if(this.upLoadData.resContent == ''){
							this.$message.error("请输入文本内容"); return
						}else{
							this.upLoadData.resSize = this.upLoadData.resContent.length;
						}
					}
					if(this.upLoadData.resText.length == 0){
						this.upLoadData.resText = ''; //空值后端处理不入库
					}
					this.formLoading = true;
					var res = await request.post(config.resources,this.upLoadData);
					this.formLoading = false;
					this.resetForm();
					if(res.code == '20000'){
						this.$message.success("资源添加成功");
						this.$emit('addResSuccess');
					}
				}
			})
		},
		addResTextLink(){
			if(this.addResText.text == ''){return}
			var obj = {}
			if(this.addResText.text){obj.text = this.addResText.text}
			if(this.addResText.link){obj.link = this.addResText.link}
			this.upLoadData.resText.push(obj);
			this.addResText = {text:'',link:''};
		},
		delResText(index){
			this.upLoadData.resText.splice(index, 1);
		},
		hideForm(){
			this.resetForm();
			this.$emit('input', false);
		},
		resetForm(){
      if (this.$refs["upLoadForm"]) {
        // 清空验证信息表单
        this.$refs["upLoadForm"].clearValidate();
        // 刷新表单
        this.$refs["upLoadForm"].resetFields();
				this.$nextTick(() =>{
					if(this.$refs.editor){ this.$refs.editor.setContent('') }
				})
				this.selectUploadType();
      }
		},

	},

};
</script>

<style scoped>
.img-view >>> .el-icon-circle-close {color: #5F6266; background: #fff; border-radius: 50%;}
.view-img{ vertical-align:middle; cursor:pointer; margin-left:10px;}
.view-img >>> .avatar-uploader{height:40px; margin:0; line-height:0; width:auto; max-width:80px; }
.view-img >>> .avatar-uploader .el-upload{border:1px solid #FAFAFA;border-radius:0;cursor: pointer;position: relative;overflow: hidden;}
.view-img >>> .avatar{ height:38px; max-width:78px;}
.view-img >>> .avatar-uploader .el-upload-dragger{ height:38px; max-width:78px; border:none;border-radius: 6px; display:flex;justify-content:center; align-items:center;}
.view-img-x{ vertical-align:middle; line-height:0;border:0px solid #FAFAFA;  height:40px; margin:0 0 0 10px; line-height:0; width:auto; max-width:80px;}
.view-img-x >>> img{ height:40px; width:auto; max-width:78px;vertical-align:middle; }
.el-upload__tip{ height:20px; line-height:20px;}
.el-upload__tip span{ color:#CCC;}
.add-inpt{ width:140px;}
.add-inpt >>> .el-input__inner{ padding:0 8px; border-radius:0;}
.add-inpt-01 >>> .el-input__inner{ border-right:0; }
.add-inpt-02 >>> .el-input__inner{ border-right:0; }
.add-table{ margin-top:10px;}
.add-table >>> .el-table__row td{ padding:5px 0;}
.add-table >>> .el-table__empty-block{ display:none;}
</style>
